<script setup lang='ts'>
//有一个正则表达式没有写完 63行，注意做一个boont值
import type {FormInstance, FormRules} from 'element-plus'//表单验证
import {loginAPI, getGames} from '@/request/api'// 封装的请求接口S
import type {userinfo, addinfo} from '@/type/infolist'//ts数据定义
import {ElMessage} from 'element-plus'//element ui 组件导入
import {ref, onMounted, reactive, watch, toRefs, toRaw, toRef} from 'vue';//vue的api
import replication from '../../hooks/copy_text'
import axios from "axios";
import Login from "@/view/loging/login.vue";

let games_list: any = ref<userinfo[]>([]);
let loading = ref(true)
// let games_list: any = reactive({data: []});
let gridData = reactive<userinfo[]>([])
let changes_list = ref<userinfo[]>([])
//加载挂载一次
let listArr = ref<userinfo[]>([])
onMounted(() => {
    init();
})
//**//初始函数 init 渲染数据列表
const init = async () => {
    if (!games_list.value.length) {
        games_list.value = await getGames();
        show_list.value = games_list.value;
    }
    loading.value = false
}

let copy_appid = (date: any) => {
    replication(date)
}

// let data_update = async () => {
//     let res1: any = await getGames()
//     changes_list.value = res1
//     Stoer_Game_lits().Get_game_list(res1)
//     listArr.value = Stoer_Game_lits().stoer_game_list
// }
const checkAge = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('secret不能为空'))
    }
    callback()
}
const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('AppID不能为空'))
    }
    callback()
}
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('游戏名称不能为空'))
    }
    callback()
}
const form = reactive<addinfo>({
    appid: '',
    name: '',
    secret: '',
})
const rules = reactive<FormRules<typeof form>>({
    appid: [{validator: validatePass, trigger: 'blur'}],
    name: [{validator: validatePass2, trigger: 'blur'}],
    secret: [{validator: checkAge, trigger: 'blur'}],
})
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log(1231233)
            append()
        } else {
            append()
            console.log('error submit!')
        }
    })
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
let append = async () => {
    console.log(1);

    let list = listArr.value.find(item => item.name == form.name);
    console.log(list);
    if (list) {
        console.log('游戏名字重复');
        ElMessage({
            message: '游戏名称重复了请重新填写',
            type: 'warning',
        })
    } else {
        dialogFormVisible.value = false
        console.log(form);
        let res = await loginAPI(form)
        if (res) {
            data_update()
        }
    }
}
const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = '140px';
let appid_Find = ref<string>('');
let value2 = ref([]);
let show_list = ref<userinfo[]>([]);
let select_names = ref([]);
let gameFind = () => {
    appid_Find.value = ''
    // let value: any = show_list.value.find((item) => {
    //     for (let i = 0 ;i < select_names.value.length; i++){
    //         return select_names.value[i] === item.name;
    //     }
    // select_names.value.forEach((name) => {
    //     // return select_names.value[0] === item.name;
    //     return name === item.name;
    // });
    // });
    // show_list = toRef(value);
    // console.log(' value ', show_list.value, value)
    if (select_names.value.length !== 0) {
        show_list.value = []
        games_list.value.forEach((item: any) => {
            let res_name = select_names.value.find(name => item.name === name)
            if (res_name) {
                show_list.value.push(item)
            }
        })
    } else {
        show_list.value = games_list.value
    }
}

let appid_lookup = () => {
    let res = games_list.value.find((item: any) => item.appid == appid_Find.value)
    if (res) {
        show_list.value = []
        show_list.value.push(res)
    } else {
        ElMessage.error('该游戏没有找到,检查appid是否正确')

    }

    select_names.value = []
}
let update_video_obj = reactive({
    active: false,
    video_count: 5,
    appid: '',
})
let update_video_dialog = (data: any) => {
    console.log(' data ', data);
    update_video_obj.active = true;
    update_video_obj.video_count = data.config.video;
    update_video_obj.appid = data.appid;
}
let update_video_func = async () => {
    update_video_obj.active = false;
    if (update_video_obj.video_count < 0) update_video_obj.video_count = 5;
    console.log(' type of ', typeof update_video_obj.video_count);
    const result = await axios.post('/api/games/update_video_count', {
        appid: update_video_obj.appid,
        video: Number(update_video_obj.video_count)
    });
    if (result.data.modifiedCount === 1) {
        alert('修改成功');
        games_list.value.forEach((item: any) => {
            if (item.appid === update_video_obj.appid)
                item.config.video = update_video_obj.video_count;
        });
    } else {
        alert('修改失败');
    }
}
</script>
<template>
    <el-dialog v-model="update_video_obj.active" title="修改视频数量" width="500">
        <el-form v-model="update_video_obj">
            <el-form-item label="请输入数量:" :label-width="formLabelWidth">
                <el-input v-model="update_video_obj.video_count" autocomplete="off" type="number"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="update_video_obj.active = false">取消</el-button>
                <el-button type="primary" @click="update_video_func">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <div>
        <el-container class="app-container custom-container">
            <el-header class="header">
                <el-select placeholder="游戏名字查询:" v-model="select_names" multiple collapse-tags
                           style="width: 240px; margin-right: 10px;">
                    <el-option v-for="item in games_list" :key="item.openId" :label="item.name" :value="item.name"/>
                </el-select>
                <el-input v-model="appid_Find" style="width: 240px" placeholder="appid查询:"/>
                <el-button @click="gameFind" class="button" type="success" style="margin-left: 10px;">
                    <el-icon>
                        <Search/>
                    </el-icon>
                    查询
                </el-button>

                <el-button @click="appid_lookup" class="button" type="success">
                    <el-icon>
                        <Search/>
                    </el-icon>
                    appid 查询
                </el-button>

            </el-header>

            <el-main class="main">
                <div class="table-container">
                    <el-table :data="show_list" style="width: 100%; height: 500px; " border v-loading="loading">
                        <el-table-column prop="appid" label="AppID" align="center">
                            <template #default="scope">
                    <span>{{ scope.row.appid }}
                      <el-tooltip class="box-item" effect="dark" content="点击可以复制" placement="top-start">
                      <span @click="copy_appid(scope.row.appid)"><el-icon class="icon_color"><CopyDocument/></el-icon></span>
                    </el-tooltip>
                    </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="name" align="center">
                            <template #default="scope">
                    <span>{{ scope.row.name }}
                      <el-tooltip class="box-item" effect="dark" content="点击可以复制" placement="top-start">
                      <span @click="copy_appid(scope.row.name)"><el-icon class="icon_color"><CopyDocument/></el-icon></span>
                    </el-tooltip>
                    </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="secret" label="secret" align="center">
                            <template #default="scope">
                    <span>{{ scope.row.secret }}
                      <el-tooltip class="box-item" effect="dark" content="点击可以复制" placement="top-start">
                      <span @click="copy_appid(scope.row.secret)"><el-icon class="icon_color"><CopyDocument/></el-icon></span>
                    </el-tooltip>
                    </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="config.video" label="视频数量" align="center">
                            <template #default="scope">
                    <span>{{ scope.row.config.video }}
                        <el-tooltip class="box-item" effect="dark" content="点击修改" placement="top-start">
                          <span @click="update_video_dialog(scope.row)"><el-icon class="icon_color"><Edit/></el-icon></span>
                    </el-tooltip>
                    </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-main>
        </el-container>
    </div>
    <el-dialog v-model="dialogFormVisible" title="游戏信息添加" width="500">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" status-icon :rules="rules" label-width="auto"
                 class="demo-ruleForm">
            <el-form-item label=" Game Appid" prop="appid">
                <el-input v-model="form.appid" type="text" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="Game Name" prop="name">
                <el-input v-model="form.name" type="text" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="Game Secret" prop="secret">
                <el-input v-model="form.secret"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogTableVisible" title="游戏查询列表" width="800">
        <el-table :data="gridData" border>
            <el-table-column property="appid" label="appid" width="150" align="center"/>
            <el-table-column property="name" label="name" width="200" align="center"/>
            <el-table-column property="secret" label="secret" align="center"/>
            <el-table-column property="" label="操作" align="center">
                <template #default="scope">
                    <el-button type='primary' link>
                        修改
                    </el-button>
                    <el-button type='success' link>
                        详情
                    </el-button>
                    <el-button type='danger' link>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>

</template>
<style scoped>
.icon_color {
    color: #409EFF;
}
</style>